@extends('wap.layout.base')
@section('scripts')
    <script src="{{ asset('js/velocity.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/shutter.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: function() {
                return {
                    listData: [],
                    pageData: {!! $lists !!},
                    finished: false,//是否已加载完成，加载完成后不再触发load事件
                    loading: false,//加载loading开关
                    params: {page : 2, cateid : 0, catepid : 0,position:1},
                    cates: {!! $news_category !!},
                    childs: [],
                }
            },
            created(){
                this.listData = this.pageData.data;
                this.cates.unshift({id: 0,label: "推荐阅读"});
            },
            methods: {
                list() {
                    let that = this;
                    this.finished = false;
                    this.loading = true;
                    setTimeout(()=>{
                        $.get("{{ route('wap.index.index') }}",this.params,function(res){
                            that.pageData = res.data;
                            if(that.params.page == 1){
                                that.listData = res.data.data;
                            }else{
                                that.listData = that.listData.concat(res.data.data);
                            }
                            if((that.pageData.last_page == 1) || (that.params.page == that.pageData.last_page)){
                                that.finished = true;
                            }
                            that.loading = false;
                            that.params.page ++;
                        })
                    },500);
                },
                changePid(index){
                    if(index == 0){
                        this.params.position = 1;
                        this.params.catepid = 0;
                    }else{
                        this.params.position = 0;
                        this.params.catepid = this.cates[index].id;
                    }
                    this.params.cateid = 0;
                    this.params.page   = 1;
                    this.listData = [];
                    this.childs = [];
                    if(this.cates[index].children){
                        this.childs = [{id: 0,label: "全部"}];
                        this.childs = this.childs.concat(this.cates[index].children);
                    }
                    this.list();
                },
                changeId(index){
                    if(index == 0){
                        this.params.cateid = 0;
                    }else{
                        this.params.cateid = this.childs[index].id;
                    }
                    this.params.page   = 1;
                    this.listData = [];
                    this.list();
                },
                goLive(){
                    window.location.href = "{{ route('wap.live.index') }}";
                },
                info(id) {
                    window.location.href = "{{ route('wap.new.info') }}"+'?id='+id;
                },
            }
        });
        $(function () {
            let width = $('.main-banner').width();
            let height = $('.main-banner').height();
            $('.shutter').shutter({
                shutterW: width, // 容器宽度
                shutterH: height, // 容器高度
                isAutoPlay: true, // 是否自动播放
                playInterval: 3000, // 自动播放时间
                curDisplay: 0, // 当前显示页
                fullPage: false // 是否全屏展示
            });
        })
    </script>
@endsection
@section('content')
    @include('wap.layout.header')
    <div class="container main new" style="background: #fff">
        <div class="row">
            <div class="col-xs-12 main-banner">
                <div class="shutter">
                    <div class="shutter-img">
                        @foreach($news_position as $k=>$position)
                            @if($k < 5)
                                <a href="{{ route('wap.new.info',['id'=>$position['id']]) }}" data-shutter-title="{{$position['title']}}"><img src="{{$position['thumb']}}" alt="#"></a>
                            @endif
                        @endforeach
                    </div>
                    <ul class="shutter-btn">
                        <li class="prev"></li>
                        <li class="next"></li>
                    </ul>
                    <div class="shutter-desc">
                        <p>{{ $news_position[0]['title'] }}</p>
                    </div>
                </div>
            </div>
            <div id="app" v-cloak>
                <div class="col-xs-12 main-notice" @click="goLive()">
                   <div class="notice-title">快讯：</div>
                    <van-notice-bar background="#fff"  :scrollable="true">
                        {{ $live['content'] }}
                    </van-notice-bar>
                </div>
                <div class="main-menu">
                    <div class="col-xs-12">
                        <van-tabs @click="changePid" background="#f8f8f8" sticky="true" title-active-color="#13afe0" color="#13afe0" :ellipsis="false" line-width="50">
                            <van-tab v-for="cate in cates" :title="cate.label"></van-tab>
                        </van-tabs>
                        <van-tabs class="cate-child" v-if="childs.length" @click="changeId" background="#f8f8f8" sticky="true" title-active-color="#fff" color="#13afe0" :ellipsis="false" line-height="0">
                            <van-tab v-for="child in childs">
                                <div slot="title">
                                    <img v-if="child.avatar" :src="child.avatar" alt="">@{{ child.label }}
                                </div>
                            </van-tab>
                        </van-tabs>
                    </div>
                </div>
                <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="list">
                    <div class="col-xs-12" v-for="items in listData"  @click="info(items.id)">
                        <div class="main-item">
                            <div class="main-item-img">
                                <span class="tag-name" v-if="items.cate_child">@{{ items.cate_child.name }}</span>
                                <span class="tag-name none" v-else></span>
                                <img :src="items.thumb">
                            </div>
                            <div class="main-item-info">
                                <p class="info-title">@{{ items.title }}</p>
                                <p class="info-other">
                                    <img :src="items.user.avatar">
                                    <span class="info-other-name">
                                @{{ moment(items.created_at).format('YYYY-MM-DD') }}<i></i>
                            </span>
                                    <span class="info-other-view"><i class="fa fa-eye"></i> @{{ items.view }}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </van-list>
            </div>
        </div>
    </div>
    @include('wap.layout.footer')
@endsection

